```jsx
import * as editable from "@zag-js/editable"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export default function Editable() {
  const service = useMachine(editable.machine, { id: createUniqueId() })

  const api = createMemo(() => editable.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div {...api().getAreaProps()}>
        <input {...api().getInputProps()} />
        <span {...api().getPreviewProps()} />
      </div>
    </div>
  )
}
```
